<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="static/css/style.css" />
<script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="static/js/share.js"></script><!-- Core CSS file -->
<link rel="stylesheet" href="static/photoSwipe/photoswipe.css"> 

<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite, 
     - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="static/photoSwipe/default-skin/default-skin.css"> 

<!-- Core JS file -->
<script src="static/photoSwipe/photoswipe.min.js"></script> 

<!-- UI JS file -->
<script src="static/photoSwipe/photoswipe-ui-default.js"></script>
<style type="text/css">
.pswp__button--share,.pswp__button--arrow--left,.pswp__button--arrow--right{ display:none}
</style>
<title>巧匠部落动态列表</title>
</head>
<body>
	<div class="warp">
    	<div class="install_tip_top">
        	<div class="logo_ico"></div>
            <div class="logo"></div>
            <div class="info">中国首个工匠综合服务平台</div>
            <a class="intsll_btn" href="javascript:void(0)" onclick="share.download('http://image.qjbuluo.com/o_1da695eu21jg0j3310pbd5rtcua.apk', '')">免费安装</a>
        </div>
        <div class="news_list">
        	<div class="loading"></div>
        </div>
        <div class="install_tip_buttom">
        	<a href="#">安装巧匠部落APP，查看更多工友动态</a>
        </div>
        <a href="javascript:void(0)" class="img_download">安装APP下载图片</a>
    </div>




    <!-- Root element of PhotoSwipe. Must have class pswp. -->
	<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

	    <!-- Background of PhotoSwipe. 
	         It's a separate element as animating opacity is faster than rgba(). -->
	    <div class="pswp__bg"></div>

	    <!-- Slides wrapper with overflow:hidden. -->
	    <div class="pswp__scroll-wrap">

	        <!-- Container that holds slides. 
	            PhotoSwipe keeps only 3 of them in the DOM to save memory.
	            Don't modify these 3 pswp__item elements, data is added later on. -->
	        <div class="pswp__container">
	            <div class="pswp__item"></div>
	            <div class="pswp__item"></div>
	            <div class="pswp__item"></div>
	        </div>

	        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
	        <div class="pswp__ui pswp__ui--hidden">

	            <div class="pswp__top-bar">

	                <!--  Controls are self-explanatory. Order can be changed. -->

	                <div class="pswp__counter"></div>

	                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

	                <button class="pswp__button pswp__button--share" title="Share"></button>

	                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

	                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

	                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
	                <!-- element will get class pswp__preloader--active when preloader is running -->
	                <div class="pswp__preloader">
	                    <div class="pswp__preloader__icn">
	                      <div class="pswp__preloader__cut">
	                        <div class="pswp__preloader__donut"></div>
	                      </div>
	                    </div>
	                </div>
	            </div>

	            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
	                <div class="pswp__share-tooltip"></div> 
	            </div>

	            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
	            </button>

	            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
	            </button>

	            <div class="pswp__caption">
	                <div class="pswp__caption__center"></div>
	            </div>

	        </div>

	    </div>

	</div>

<script>
var id = share.get_param('id');
function init_work_dynamics (list) {
	var html = '',
		list_dom = $('.news_list'),
		init_ivhtml = function(data) {
			if(parseInt(data.type) == 1) {
				var imghtml = '';
				var cls = 'c';
				switch(data.entries.length) {
					case 1:
						cls='a'
						break;
					case 2:
						cls='b'
						break;
					case 4:
						cls='b'
						break;
				}
				$.each(data.entries, function(index, value) {
					imghtml += '<li data-img="'+value.content+'" data-w="'+share.get_img_info(value.content).w+'" data-h="'+share.get_img_info(value.content).h+'"><div class="img" style="background-image:url('+value.content+')"></div></li>';
				});
				imghtml = '<ul class="img_l ' + cls + '">' + imghtml + '</ul>'
				return imghtml;
			}
			if(parseInt(data.type) == 2 || (data.videoUrl.length > 0 && data.cover.length > 0)) {
				var videohtml = '';
				videohtml = '\
					<div class="video_box">\
						<div>\
							<img src="' + data.cover + '">\
							<p>'+share.get_video_info(data.videoUrl).time+'s   /  '+share.get_video_info(data.videoUrl).size+'</p>\
							<span class="dz">'+(data.agree > 0 ? data.agree : '')+'</span>\
						</div>\
					</div>\
				';
				return videohtml;
			}
			return '';
			
		},
		init_commenthtml = function(comments) {
			var commenthtml = '';
			if(comments && comments.length > 0) {
				$.each(comments, function(index,value){
					var commentContent = '';
					switch(value.category) {
						case 0:
							commentContent = '<span class="username3">'+value.userName+'</span>取消了点赞.';
							break;
						case 1:
							commentContent = '<span class="username3">'+value.userName+'</span>赞了这条动态';
							break;
						case 2:
							commentContent = '<span class="username3">'+value.userName+'</span>给<span class="username3">'+value.targetName+'</span>打赏了一个红包.';
							break;
						case 3:
							commentContent = '<span class="username3">'+value.userName+'</span>分享了此动态.';
							break;
						case 4:
							commentContent = value.content;
							break;
					}
					commenthtml += '\
						<li>\
	                    	<a href="userprofile.html?id='+ value.userId +'" class="avatar" style="background-image:url('+value.userHead+')"></a>\
	                        <div class="comment_text">\
	                        	<p class="sty1">\
	                            	'+commentContent+'\
	                            </p>\
	                            <div class="red_bag2 '+(value.awarded ? 'active' : '')+'"><span class="nums">'+(value.award > 0 ? value.award : '')+'</span></div>\
	                            <div class="approve2 '+(value.agreed ? 'active' : '')+'"><span class="nums">'+(value.agree > 0 ? value.agree : '')+'</span></div>\
	                        </div>\
	                    </li>\
					';
					commenthtml = '<ul class="comment_list">' + commenthtml + '</ul>'
				})
			}
			return commenthtml;
		};
		init_dshtml = function(data) {
			var html = '';
			if(typeof(data.received) != 'undefined') {
				html += '<div class="ico_comment_hb'+(!data.received ? ' active' : '')+'"><span>评论领现金</span></div>';
			}
			return html;
		};
	$.each(list, function(index, value) {
		html += '\
			<div class="news_list_l" data-id="'+value.id+'">\
            	<div class="user_area">\
                	<a href="userprofile.html?id='+ value.userId +'" class="avatar" style="background-image:url(' + value.userHead + ')"></a>\
                    <div class="dec1">\
                    	<div class="username">' + value.userName + '</div>\
                        <p>' + value.createTime + '</p>\
                    </div>\
                    <div class="more"></div>\
                </div>\
                <div class="content">\
                	' + value.summary + '\
                </div>\
				' + init_ivhtml(value) + '\
                <ul class="rep_box">\
                	<li>\
                    	<div class="share"><span>' + (value.collect > 0 ? value.collect : '') + '</span></div>\
                    </li>\
                    <li>\
                    	<div class="edit ' + (value.commented ? 'active' : '') + '"><span>' + (value.comment > 0 ? value.comment : '') + '</span></div>\
                    </li>\
                    <li>\
                    	<div class="approve ' + (value.agreed ? 'active' : '') + '"><span>' + (value.agree > 0 ? value.agree : '') + '</span></div>\
                    </li>\
                </ul>\
                <div class="comment_box">\
                	<a href="javascript:void(0)" class="avatar"></a>\
                    <input placeholder="说点什么吧..." type="text" disabled />\
                    '+init_dshtml(value)+'\
                </div>\
                '+init_commenthtml(value.comments)+'\
                <div class="all_comments_btn ' + (value.comment > 0 ? '' : 'hide') + '">全部评论' + (value.comment > 0 ? ' ('+value.comment+')' : '') + '</div>\
           </div>\
		'
	});
	list_dom.append(html);
	dynamics_bind();
}
function get_dynamics(id) {
	$('.loading').show();
	var obj = {
		url: share.get_api_url()+'h5/contentList/' + id,
		success: function(data) {
			if(parseInt(data.status) != 0) {
				share.add_tip_a($('.news_list'), data.msg);
			} else if (parseInt(data.status) == 0) {
				share.remove_tip();
				if(data.result.length > 0) {
					init_work_dynamics(data.result)
				} else {
					share.add_tip_a($('.news_list'), '暂无数据！');
				}
			}
			$('.install_tip_buttom').show();
		},
		complete : function() {
			$('.loading').hide();
		}
	}
	share.ajax_control(obj);
}
function hide_img_init() {
	$('.img_download').hide();
	$('.install_tip_top').removeClass('fix');
}
function show_large_img(current) {
	var pswpElement = document.querySelectorAll('.pswp')[0];
	var imgArr = $(current).closest('.img_l').find('li')
	// build items array
	var items = [];
	$.each(imgArr,function(index,value){
		items.push({
			src: $(value).attr('data-img'),
			w: $(value).attr('data-w') || 300,
			h: $(value).attr('data-h') || 300
		})
	})
	
	// define options (if needed)
	var options = {
		// optionName: 'option value'
		// for example:
		index: $(current).index() // start at first slide
	};
	
	// Initializes and opens PhotoSwipe
	var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
	gallery.init();
	$('.install_tip_top').addClass('fix');
	$('.img_download').show();
}
function dynamics_bind () {
	$('.news_list_l .share').on('click', function(){
		alert('下载APP参与分享.')
	})
	$('.news_list_l .edit').on('click ', function(){
		alert('下载APP使用此功能.')
	})
	$('.news_list_l .approve ').on('click', function(){
		alert('下载APP参与点赞.')
	})
	$('.news_list_l .approve ').on('click', function(){
		alert('下载APP参与点赞.')
	})
	$('.news_list_l .comment_box').on('click', function(){
		alert('下载APP参与评论.')
	})
	$('.news_list_l .red_bag2').on('click', function(){
		alert('下载APP参与打赏.')
	})
	$('.news_list_l .approve2').on('click', function(){
		alert('下载APP参与点赞.')
	})
	$('.news_list_l .all_comments_btn').on('click', function(){
		alert('下载APP查看所有评论.')
	})
	$('.news_list_l .video_box').on('click', function(){
		window.open('video.html?type=work_dynamics&id=39181066300559360&current_infoid='+$(this).closest('.news_list_l').attr('data-id'));
	});
	$('.img_l li').on('click', function(){
		show_large_img(this);
	})
}
$(function(){
	get_dynamics(id ? id : '39181066300559360');
})
</script>
</body>
</html>
